<template>
    <el-tabs v-model="tabsCurrent" class="deleteBorder" @tab-click="tabClickHandle">
        <el-tab-pane label="合同" name="contract">
            <div class="title">
                <div class="title_left">合同总数 : {{ contractList.length }}</div>
                <el-upload
                        class="upload-demo"
                        :show-file-list="false"
                        :before-upload="beforeUploadHandle"
                        :action="$uri + '/api/clientAtt/uploadFile/1_0'"
                        :data="contractParams"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                        style="margin-left: 10px">
                    <el-button size="small" type="primary">点击上传合同</el-button>
                </el-upload>
            </div>
            <FileList :list="contractList" @downloadFile="downloadFile" :showEdit="false" :showDelete="false"/>
        </el-tab-pane>

        <el-tab-pane label="回款计划" name="collectionPlan">
            <div class="title">
                <div class="title_left">回款计划总数 : {{ planList.length }}</div>
                <el-upload
                        class="upload-demo"
                        :show-file-list="false"
                        :before-upload="beforeUploadHandle"
                        :action="$uri + '/api/clientAtt/uploadFile/1_0'"
                        :data="planParams"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                        style="margin-left: 10px">
                    <el-button size="small" type="primary">点击上传回款计划</el-button>
                </el-upload>
            </div>
            <FileList :list="planList" @downloadFile="downloadFile" :showEdit="false" :showDelete="false"/>
        </el-tab-pane>

        <el-tab-pane label="回款单" name="collectionOrder">
            <div class="title">
                <div class="title_left">回款单总数 : {{ orderList.length }}</div>
                <el-upload
                        class="upload-demo"
                        :show-file-list="false"
                        :before-upload="beforeUploadHandle"
                        :action="$uri + '/api/clientAtt/uploadFile/1_0'"
                        :data="orderParams"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                        style="margin-left: 10px">
                    <el-button size="small" type="primary">点击上传回款单</el-button>
                </el-upload>
            </div>
            <FileList :list="orderList" @downloadFile="downloadFile" :showEdit="false" :showDelete="false"/>
        </el-tab-pane>

        <el-tab-pane label="发票" name="invoice">
            <div class="title">
                <div class="title_left">发票总数 : {{ invoiceList.length }}</div>
                <el-upload
                        class="upload-demo"
                        :show-file-list="false"
                        :before-upload="beforeUploadHandle"
                        :action="$uri + '/api/clientAtt/uploadFile/1_0'"
                        :data="invoiceParams"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                        style="margin-left: 10px">
                    <el-button size="small" type="primary">点击上传发票</el-button>
                </el-upload>
            </div>
            <FileList :list="invoiceList" @downloadFile="downloadFile" :showEdit="false" :showDelete="false"/>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

import FileList from "@/components/file_list/file_list"
import axios from "axios";

export default {
    name: "client_contract",
    components: {
        FileList
    },
    props: {
        clientInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            tabsCurrent: 'contract',
            contractList: [],
            planList: [],
            orderList: [],
            invoiceList: [],
            contractParams: {
                'type': '1',
                'clientId': "",
                'fileSize': "",
                'accessoriesType': "1",
                orgId: this.$store.getters.getUserInfo.orgId,
                orgNum: this.$store.getters.getUserInfo.orgNum,
                companyId: this.$store.getters.getUserInfo.companyId
            },
            planParams: {
                'type': '1',
                'clientId': "",
                'fileSize': "",
                'accessoriesType': "2",
                orgId: this.$store.getters.getUserInfo.orgId,
                orgNum: this.$store.getters.getUserInfo.orgNum,
                companyId: this.$store.getters.getUserInfo.companyId
            },
            orderParams: {
                'type': '1',
                'clientId': "",
                'fileSize': "",
                'accessoriesType': "3",
                orgId: this.$store.getters.getUserInfo.orgId,
                orgNum: this.$store.getters.getUserInfo.orgNum,
                companyId: this.$store.getters.getUserInfo.companyId
            },
            invoiceParams: {
                'type': '1',
                'clientId': "",
                'fileSize': "",
                'accessoriesType': "4",
                orgId: this.$store.getters.getUserInfo.orgId,
                orgNum: this.$store.getters.getUserInfo.orgNum,
                companyId: this.$store.getters.getUserInfo.companyId
            }
        }
    },
    mounted() {
      this.init()
    },
    methods: {
        init() {
            let that = this
            that.$request("/api/clientAtt/queryFile/1_0", {clientId: this.clientInfo.clientId}, "POST").then((data) => {
                let contractList = []
                let planList = []
                let orderList = []
                let invoiceList = []
                data.rows.map((item) => {
                    switch (item.accessoriesType) {
                        case '1':
                            contractList.push(that.shiftDataHandle(item));
                            break;
                        case '2':
                            planList.push(that.shiftDataHandle(item));
                            break;
                        case '3':
                            orderList.push(that.shiftDataHandle(item));
                            break;
                        case '4':
                            invoiceList.push(that.shiftDataHandle(item));
                            break;
                        default:
                            return null;
                    }
                })
                that.contractList = [...contractList]
                that.planList = [...planList]
                that.orderList = [...orderList]
                that.invoiceList = [...invoiceList]
            })
        },
        shiftDataHandle(item) {
            let that = this
            return {
                title: item.description,
                remark: that.$moment(item.uploadTime).format("YYYY-MM-DD HH:mm:ss"),
                size: that.$utils.getFileSize(item.customerAccessoriesSize),
                listHover: false,
                ...item
            }
        },
        tabClickHandle(tab, event) {
            let that = this
            this.that = tab
            switch (tab) {
                case 'contract':
                    break;
                case 'collectionPlan':
                    break;
                case 'collectionOrder':
                    break;
                case 'invoice':
                    break;
                default:
                    return null;
            }
        },
        beforeUploadHandle(e) {
            if (e.size > 100*1024*1024) {
                this.$message.error('文件超出100M');
                return false
            }

            this.contractParams['clientId'] = this.clientInfo.clientId
            this.contractParams['fileSize'] = e.size

            this.planParams['clientId'] = this.clientInfo.clientId
            this.planParams['fileSize'] = e.size

            this.orderParams['clientId'] = this.clientInfo.clientId
            this.orderParams['fileSize'] = e.size

            this.invoiceParams['clientId'] = this.clientInfo.clientId
            this.invoiceParams['fileSize'] = e.size
        },
        downloadFile(data) {
            this.$requestFile("/api/clientAtt/downloadFile/1_0", {customerAccessoriesId: data.customerAccessoriesId})
        },
        uploadSuccess() {
            this.$message({message: '上传成功',type: 'success'});
            this.init()
        },
        uploadError() {
            this.$message.error('上传失败');
        }
    }
}
</script>

<style scoped>
.title {
    display: flex;
    justify-content: space-between;
}

.title_left {
    font-size: 14px;
}
</style>
